<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<script type="text/javascript" src="lib/jquery-1.12.2.js"></script>

	<link rel="stylesheet" type="text/css" href="../drawtool/drawtool.css">
	<script type="text/javascript" src="../drawtool/drawtool.js"></script>
	
	<link rel="stylesheet" type="text/css" href="css/demo.css">
</head>
<body id="body">
	<table border="1">
		<tr>
			<td colspan="3" class="header" >drawTool's demo</td>
		</tr>
		<tr>
			<td class="left-box">
				<table border="1">
					<tr>
						<td>
							<select id="type">
								<option value="car">--车--</option>
								<option value="board">--船--</option>
								<option value="fly">--飞机--</option>
								<option value="custom">--自定义--</option>
							</select>
						</td>
					</tr>
					<tr>
						<td>
							<select id="lineType">
								<option value="bezier">--曲线--</option>
								<option value="straight">--直线--</option>
								<option value="broken">---折线---</option>
							</select>
						</td>
					</tr>
					 <tr>
						<td>
							<select id="auto">
								<option value="1">--自动--</option>
								<option value="0">--非自动--</option>
							</select>
						</td>
					</tr>
					<tr>
						<td>
							<select id="arrow">
								<option value="arrow">--有箭头--</option>
								<option value="none">-无箭头--</option>
							</select>
						</td>
					</tr>
					<tr>
						<td>
							<input id="text" type="" name="">
						</td>
					</tr>
					<tr>
						<td>
							<button onclick="addNode()">新增节点</button>
						</td>
					</tr>
					<tr>
						<td>
							<button onclick="save()">保存</button>
						</td>
					</tr>
					<tr>
						<td>
							<button onclick="clearMap()">清除</button>
						</td>
					</tr>
					<tr>
						<td>
							<button onclick="getImage()">转化为图片</button>
						</td>
					</tr>
					<!-- <tr>
						<td>
							<button onclick="scale()">缩放</button>
						</td>
					</tr> -->
				</table>
			</td>
			<td>
				<div id="canvas" class="canvas"></div>
			</td>
			<td class="right-box">
				1.点击增加节点，增加图元。<hr/>
				2.鼠标左单击长按拖动图标。<hr/>
				3.鼠标移动到图元上, 单击锚点可以连线。<hr/>
				4.鼠标右击可以取消连线。<hr/>
				5.鼠标移动到线上，单击可以选中线条。<hr/>
				6.选中线的情况下，点击删除可以删除线条。<hr/>
				7.选中线的情况下，点击设置可以召唤出贝塞尔控制点，改变线。<hr/>
				8.在图元上右击可以召唤出节点的删除按钮。<hr/>
			</td>
		</tr>
		
	</table>
	<script type="text/javascript" src="js/demo.js"></script>
</body>
</html>